<template>
	<view class="my-user">
		<view class="position-relative">
			<image style="height: 392rpx;" src="../../static/my/top01@2x.png"></image>
			<view class="my-top">
				<text>我的</text>
			</view>
			<view class="my-information">
				<view class="my-left">
					<image :src="wxuserInfo.avatarUrl||''" class="rounded-circle border-light"></image>
				</view>
				<view class="my-right" v-if="wxuserInfo.nickName">
					<view class="my-btn text-hidden-one" style="width:350rpx">
						<text class="mr-1">昵称:</text>{{wxuserInfo.nickName||''}}
					</view>
					<view class="my-btn text-hidden-one" style="width:350rpx">
						<text class="mr-1">姓名:</text>{{userInfo.fullName||''}}
					</view>
				</view>
				<button v-else class="my-righta" @click="logiweixin">获取头像昵称</button>
			</view>
		</view>
		
		<view>
			<view class="my-user-information">
				<image style="width:646rpx;height: 105rpx;" src="../../static/my/xx02.png"></image>
				<view class="position-absolute top-0 d-flex a-center" style="width:646rpx;height: 105rpx;line-height: 105rpx;">
					<image style="width:40rpx;height: 36rpx;margin-left:34rpx" src="../../static/my/bm01@2x.png"></image>
					<text style="margin-left:29rpx">部门</text>
					<view v-if="userInfo.departmentName&&userInfo.groupName" class="ml-auto text-right input text-hidden-one" style="margin-right:34rpx;width: 364rpx;">{{userInfo.departmentName}}-{{userInfo.groupName}}</view>
						<view v-else class="ml-auto text-right input text-hidden-one" style="margin-right:34rpx;width: 364rpx;"></view>
				</view>
			</view>
		</view>
		
		<view>
			<view class="my-user-information">
				<image style="width:646rpx;height: 105rpx;" src="../../static/my/xx02.png"></image>
				<view class="position-absolute top-0 d-flex a-center" style="width:646rpx;height: 105rpx;line-height: 105rpx;">
					<image style="width:40rpx;height: 36rpx;margin-left:34rpx" src="../../static/my/dh01@2x.png"></image>
					<text style="margin-left:29rpx">联系电话</text>
					<view class="ml-auto text-right input text-hidden-one" style="margin-right:34rpx;width: 364rpx">{{userInfo.phone}}</view>
				</view>
			</view>
		</view>
		
		<view>
			<view class="my-user-information">
				<image style="width:646rpx;height: 105rpx;" src="../../static/my/xx02.png"></image>
				<view class="position-absolute top-0 d-flex a-center" style="width:646rpx;height: 105rpx;line-height: 105rpx;">
					<image style="width:40rpx;height: 36rpx;margin-left:34rpx" src="../../static/my/yx01@2x.png"></image>
					<text style="margin-left:29rpx">邮箱</text>
					<view class="ml-auto text-right input text-hidden-one" style="margin-right:34rpx;width: 364rpx">{{userInfo.mailbox}}</view>
				</view>
			</view>
		</view>
		
		<view @click="setpass">
			<view class="my-user-information">
				<image style="width:646rpx;height: 105rpx;" src="../../static/my/xx02.png"></image>
				<view class="position-absolute top-0 d-flex a-center" style="width:646rpx;height: 105rpx;line-height: 105rpx;">
					<image style="width:40rpx;height: 36rpx;margin-left:34rpx" src="../../static/my/xgmm01@2x.png"></image>
					<text style="margin-left:29rpx">修改密码</text>
					<image class="ml-auto" style="margin-right:34rpx;width: 12rpx;height: 22rpx;" src="../../static/my/tz01.png"></image>
				</view>
			</view>
		</view>
		
		<!-- 退出按钮 -->
		<view @click="outlogin" class="main-bg-color d-flex a-center j-center text-white" style="width: 640rpx;height:98rpx;border-radius: 49px;margin:20rpx 56rpx 0 54rpx">
			退出登录
		</view>
		
		
		<NavbarBottom :tabID="tabID" />
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
import NavbarBottom from "@/components/navbar-bottom.vue"
export default {
	data(){
		return {
			tabID:0,
			appId:'wx87dc86b090ae2e4a',
			secret:'e05285412a18634626d78bb141371933',
			code:''
		}
	},
	components:{NavbarBottom},
	onLoad(data){
		this.tabID = data.tabId
	},
	computed:{
		...mapState({
			loginStatus:state=>state.user.loginStatus,
			userInfo:state=>state.user.userInfo,
			wxuserInfo:state=>state.user.wxuserInfo
		})
	},
	methods:{
		...mapMutations(['logout','setwxuserInfo']),
		login(){
			uni.navigateTo({
				url:'/pages/login/login'
			})
		},
		//微信登录
		logiweixin(){
			//检查登录态是否过期
			uni.checkSession({
				provider: 'weixin',
				success: function(loginRes) {
					// console.log('checkSession成功',loginRes);
				},
				fail: function(loginRes) {
					console.log('checkSession失败',loginRes);
				},
			});
			var _this=this
			//重新登录
			let jsCode = ''
			uni.login({
				provider: 'weixin',
				success: function(loginRes) {
					// console.log('login',loginRes)
					jsCode = loginRes.code;
					_this.code=jsCode
					// console.log('login重新登录',{
					// 	jscode: loginRes.code,
					// 	jscodeinfo:loginRes
					// });
				},
				fail: function(loginRes) {
					console.log(loginRes)
				}
			});
			
			// 获取用户信息
			uni.getUserProfile({
				desc: '获取你的昵称、头像、地区及性别',
				success: res => {
					this.setwxuserInfo(res.userInfo)
					// 登录请求
					this.$api.getwx({
						appId:this.appId,
						secret:this.secret,
						code:this.code
					},false).then(res=>{
						
					})
				},
				fail: res => {
					//拒绝授权
					uni.showToast({
						title: '获取数据失败',
						icon: 'error',
						duration: 2000
					});
					return;
				}
			});
		},
		setpass(){
			uni.navigateTo({
				url:'/pages/change-Password/change-Password'
			})
		},
		outlogin(){
			uni.reLaunch({
				url:'/pages/login/login'
			})
			uni.clearStorage();
			this.logout()
		}
	}
}
</script>

<style lang="scss">
	.my-user{
		position: relative;
		.my-top{
			width: 660rpx;
			height: 138rpx;
			margin:50rpx 30rpx 0 60rpx;
			position: absolute;
			top:0;
			text{
				position: absolute;
				top:20rpx;
				rigth:310rpx;
				bottom: 15rpx;
				left:281rpx;
				display: block;
				font-size: 36rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				display: block;
			}
		}
		.my-information{
			position: absolute;
			left:61rpx;
			right:0;
			bottom: 34rpx;
			display: flex;
			.my-left{
				image{
					width: 188rpx;
					height: 188rpx;
					background: #FFFFFF;
					border: 6rpx solid #FFFFFF;
					border-radius: 50%;
				}
			}
			.my-right{
				margin-left:49rpx;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				margin-top:auto;
			}
			.my-righta{
				margin-left:49rpx;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				margin-top:auto;
				margin-bottom: auto;
				margin-left:10rpx;
				background: none !important;
				border:none !important;
			}
			.my-righta::after{border: initial;}
		}
		.my-user-information{
			position: relative;
			margin:32rpx 53rpx 0 51rpx;
			font-size: 26rpx;
			text{
				color: #333333;
			}
			.input{
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 300;
				color: #AAAAAA;
			}
		}
	}
</style>
